<template>
  <div class="edit">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/admin' }">用户管理</el-breadcrumb-item>
        <el-breadcrumb-item >用户{{type}}</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 添加/修改表单 -->
      <el-form ref="form" 
      :model="form" 
      label-width="80px" 
      style="margin-top:20px">
        <el-form-item label="名称" style="width:400px">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="所属角色">
          <el-select v-model="form.roleid" placeholder="请选择角色">
            <el-option 
            v-for="m in roleList" 
            :key="m.id"
            :label="m.rolename" 
            :value="m.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="密码" style="width:400px">
          <el-input v-model="form.password"  show-password placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-switch 
          v-model="form.status"
          :active-value="1"
          :inactive-value="0"
          active-color="green"
          inactive-color="red"
          >
          </el-switch>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:'edit',
   data() {
      return {
        type:"添加",
        form: {
          roleid: '',  //角色id
          username:'', 
          password:'',
          status: '' , // 状态
        },
        // rules:{
        //   title:[
        //     {required:true , message:"菜单名称不能为空",trigger:'blur'},
        //     {min:3 ,max:10, message:"菜单名称不符合规则",trigger:'blur'}
        //   ],
        //   pid:[
        //     {required:true , message:"请选择上级菜单",trigger:'blur'},
        //   ],
        //   type:[
        //     {required:true , message:"请选择菜单类型",trigger:'blur'},
        //   ]
        // },
        roleList:[],
      }
    },
    computed:{
      ...mapState(["menuList"])
    },
    mounted(){

      let id = this.$route.params.id;
      if (id) {
        this.type = "编辑"
        console.log(this.type)
        this.getUserInfo(id)
      }

      this.getRoleList()

    },
    methods: {
      getRoleList(){
      this.$axios.get('/api/rolelist')
        .then((result)=>{
          console.log(result)
          this.roleList = result.data.list
        }).catch((err)=>{
          console.log(err)
        })
      },

      getUserInfo(uid){
        this.$axios.get('/api/userinfo',{params:{uid}})
        .then((result)=>{
          this.form = result.data.list
        }).catch((err)=>{
          console.log(err)
        })
      },

      onSubmit() {
        console.log('submit!');
        //获得form表单，然后进行验证
        this.$refs['form'].validate((valid) => {
          if (valid) {
            // 深拷贝
            let str = JSON.stringify(this.form)  //这里将对象转化为字符串
            let data = JSON.parse(str);   //这里再转为对象，不是同一个对象了
            
            //如果type是编辑，则把接口地址改为编辑的接口
            let url = "/api/useradd"
            if (this.type === "编辑") {
              data.id = this.$route.params.id
              url = "/api/useredit"
            }
            
            this.$axios.post(url,data)
            .then((result)=>{
              console.log(result)
              if(result.data.code === 200){
                this.$router.push('/admin');
              }
            }).catch((err)=>{
              console.log(err)
            })

            // alert('submit!');
            console.log('验证通过。。。')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
}
</script>

<style>

</style>